<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<link rel="stylesheet" href="./css/mselector.css">
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			-webkit-appearance: none; //去掉浏览器默认样式
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			-webkit-touch-callout: none;
			box-sizing: border-box;
		}
		
		html,
		body {
			margin: 0 auto;
			width: 100%;
			min-height: 100%;
			overflow-x: hidden;
			-webkit-user-select: none;
		}
		
		body {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			-webkit-text-size-adjust: 100%; //关闭自动调整字体
			-webkit-overflow-scrolling: touch;
			overflow-scrolling: touch;
		}
		
		input {
			width: 70%;
			height: 40px;
			font-size: 18px;
			border: 1px solid #b72f20;
			border-radius: 5px;
			margin: 20px 5% 0 5%;
			padding: 5px;
			line-height: 40px;
		}
		
		button {
			width: 60px;
			height: 40px;
			font-size: 18px;
			border: 1px solid #b72f20;
			border-radius: 5px;
			margin: 20px 0 0 0;
			background-color: #b72f20;
			color: #ffffff;
			line-height: 40px;
		}
    </style>
	</head>
	<body>
		<input type="date" name="">
		<input id="ipt_date" /><button id="btn_date">选择</button>
		<input id="ipt_date2" readonly="readonly" placeholder="请选择" />
		<script type="text/javascript" src="./js/mselector.js"></script>
		<script type="text/javascript">
			var mCalendar = new MCalendar({
				trigger: '#btn_date',
				target: '#ipt_date'
			});

			var mCalendar2 = new MCalendar({
				trigger: '#ipt_date2',
				target: '#ipt_date2'
			});
		</script>
	</body>
</html>